import { useEffect } from "react";

// 参考 https://css-tricks.org.cn/books/greatest-css-tricks/scroll-animation/
export default function MouseScroll() {
  const handleScroll = () => {
    const scrollValue = window.scrollY / (document.body.offsetHeight - window.innerHeight);
    document.body.style.setProperty("--scroll", scrollValue.toString());
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, [handleScroll]);

  return (
    <div className="min-h-[500vh]">
      {/* 如果将`fixed ...`声明在`svg`中，则`animation`不起作用 */}
      <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
        <svg width="100" height="100" viewBox="0 0 24 24"
          style={{
            animation: 'spin 1s linear infinite',
            animationPlayState: 'paused',
            animationDelay: 'calc(var(--scroll) * -1s)',
            animationIterationCount: 1,
            animationFillMode: 'both',
          }}>
          <path d="M21,9H15V22H13V16H11V22H9V9H3V7H21M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6C10.89,6 10,5.1 10,4C10,2.89 10.89,2 12,2Z" />
        </svg>
      </div>

    </div>

  )
}